<template>
  <div class="square" flex>
    <n-grid :x-gap="16" :y-gap="16" :cols="4" :collapsed="gridCollapsed" :collapsed-rows="gridCollapsedRows">
      <!-- <n-gi v-for="i in tasks" :key="i" :class="i % 2 ? 'green' : 'light-green'"> -->
      <n-gi v-for="task in props.tasks" :key="task.task_id" class="g-item">
        <div class="item" @click="jump(task.task_id)">
          <img class="img" :src="task.path" />
          <div>
            <div class="line">
              <n-icon size="20">
                <ChartPie />
              </n-icon>
              <div>任务名称：{{ task.task_name }}</div>
            </div>
            <div class="line">
              <n-icon size="20">
                <ClipboardList />
              </n-icon>

              <div>类型：{{ types[task.type] }}</div>
            </div>
          </div>
          <!-- {{ i }} -->
          <!-- <n-button class="btn" type="info" @click="jump">jump</n-button> -->
        </div>
      </n-gi>
      <!-- <n-gi v-if="showSuffix" suffix class="suffix" #="{ overflow }">
        {{ overflow ? '存在溢出' : '不存在溢出' }}
      </n-gi> -->
    </n-grid>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ChartPie, ClipboardList } from '@vicons/fa'
import { useUserStore } from '@/store/modules/user'
const gridCollapsed = ref(false)
const gridCollapsedRows = ref(1)
const showSuffix = ref(true)
const tasks = ref([])
const types = ['所有', '分类', '打点', '打框']
const types_description = [
  '',
  '根据提示选出图片所属名称',
  '给图中面部五官和轮廓打出关键点',
  '将货架商品框出并对其进行分类',
]
const router = useRouter()
const i_src = ref('https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg')
const props = defineProps(['tasks'])
function jump(task_id) {
  window.open('http://192.168.175.1:8080/details/?id=' + task_id)
}
</script>

<style lang="scss" scoped>
.g-item {
  height: 120px;
  background-color: rgba(0, 128, 0, 0.24);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img {
  // margin: 0 auto;
  width: 120px;
  height: 120px;
}
.item {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
}
.item :hover {
  cursor: pointer;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  // overflow: scroll;
}
.square {
  width: 90%;
}
.suffix {
  height: 120px;
  border: 1px solid rgba(0, 128, 0, 0.36);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.light-green {
  height: 120px;
  background-color: rgba(0, 128, 0, 0.12);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.green {
  height: 120px;
  background-color: rgba(0, 128, 0, 0.24);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
